:root {
    /*
    These are the main colors and font used in the website. If you make any changes here, they will be reflected in all the pages.*/
    --black: #191919;
    --blacktranslucent: rgb(25, 25, 25,0.3);
    --blacklesstranslucent:rgb(25, 25, 25,0.69);
    --gray: #a2a3bb;
    --periwinkle: #b3b7ee;
    --indigo: #7d7FCA;
    --cyan: #D4Edeb;
    --white: #fff;
    --darkpurple: hsl(255, 50%, 50%);
    
    /* Changing this changes the alignment of the title on every project page.*/
    --project-title-alignment: center;
    
    --main-font: "Avenir";
    --heading-font: "Mulish";

    /* Below are the header borders options I want to run by you.*/
    --border-option-1: 3px double var(--black);
    --border-option-2: 1px solid var(--black);
    --border-option-3: 3px double var(--black);

/* Currently number #2 is in use everywhere. Below are three options for the gradient that I've used on the home page. First was the original from Wix, second was based on the cyan color, third was based on the periwinkle color.*/
    --bg-gradient: radial-gradient(circle at 3.6751302083333335% 6.940104166666666%, #4D6001 0%, 11.55%, rgba(77,96,1,0) 35%), radial-gradient(circle at 92.96712239583333% 9.554036458333332%, #FAAA63 0%, 17.5%, rgba(250,170,99,0) 35%), radial-gradient(circle at 95.20670572916666% 90.48177083333333%, #C9C6FF 0%, 34.1%, rgba(201,198,255,0) 55%), radial-gradient(circle at 4.313151041666666% 93.34635416666667%, #97B49D 0%, 29.900000000000002%, rgba(151,180,157,0) 65%), radial-gradient(circle at 46.555989583333336% 11.50390625%, rgba(214,222,72,0.99) 0%, 25%, rgba(214,222,72,0) 50%), radial-gradient(circle at 51.121419270833336% 89.98697916666667%, #93C3FF 0%, 42%, rgba(147,195,255,0) 70%), radial-gradient(circle at 48.9013671875% 49.521484375%, #000000 0%, 100%, rgba(0,0,0,0) 100%);
    --bg-gradient-2: radial-gradient(circle at 3.6751302083333335% 6.940104166666666%, #2D6E68 0%, 11.55%, rgba(77,96,1,0) 35%), radial-gradient(circle at 92.96712239583333% 9.554036458333332%, #EDE8D3 0%, 17.5%, rgba(250,170,99,0) 35%), radial-gradient(circle at 95.20670572916666% 90.48177083333333%, #2D6E68 0%, 34.1%, rgba(201,198,255,0) 55%), radial-gradient(circle at 4.313151041666666% 93.34635416666667%, #589893 0%, 29.900000000000002%, rgba(151,180,157,0) 65%), radial-gradient(circle at 46.555989583333336% 11.50390625%, #EDE8B2 0%, 25%, rgba(214,222,72,0) 50%), radial-gradient(circle at 51.121419270833336% 89.98697916666667%, #7d7fca 0%, 42%, rgba(147,195,255,0) 70%), radial-gradient(circle at 48.9013671875% 49.521484375%, #191919 0%, 100%, rgba(0,0,0,0) 100%);
    --bg-gradient-3: radial-gradient(circle at 3.6751302083333335% 6.940104166666666%, #3C406E 0%, 11.55%, rgba(77,96,1,0) 35%), radial-gradient(circle at 92.96712239583333% 9.554036458333332%, #D4Edeb 0%, 17.5%, rgba(250,170,99,0) 35%), radial-gradient(circle at 95.20670572916666% 90.48177083333333%, #6E5D3C 0%, 34.1%, rgba(201,198,255,0) 55%), radial-gradient(circle at 4.313151041666666% 93.34635416666667%, #EDE8B2 0%, 29.900000000000002%, rgba(151,180,157,0) 65%), radial-gradient(circle at 46.555989583333336% 11.50390625%, #EDDAB2 0%, 25%, rgba(214,222,72,0) 50%), radial-gradient(circle at 51.121419270833336% 89.98697916666667%, #3C406E 0%, 42%, rgba(147,195,255,0) 70%), radial-gradient(circle at 48.9013671875% 49.521484375%, #191919 0%, 100%, rgba(0,0,0,0) 100%);



/*Below are the font sizes used in the website. If you make any changes here, they will be reflected in all the pages.*/
--subpfont: clamp(0.9333rem, 0.9132rem + 0.1vw, 1.037rem);
--pfont: clamp(0.9958rem, 0.9628rem + 0.1647vw, 1.1667rem);
--h6font: clamp(1.0625rem, 1.0143rem + 0.241vw, 1.3125rem);
--h5font: clamp(1.1337rem, 1.0676rem + 0.3305vw, 1.4766rem);
--h4font: clamp(1.2096rem, 1.1226rem + 0.4352vw, 1.6611rem);
--h3font: clamp(1.2907rem, 1.1793rem + 0.5572vw, 1.8688rem);
--h2font: clamp(1.3772rem, 1.2374rem + 0.699vw, 2.1024rem);
--mainheadingfont: clamp(1.4694rem, 1.2968rem + 0.8634vw, 2.3652rem);

box-sizing: border-box;


}

@font-face {
    font-family: Avenir;
    src: url(/assets/Fonts/avenir.otf);
    
}
@font-face{
    font-family: Mulish;
    src: url(/assets/Fonts/Mulish-VariableFont_wght.ttf);
}
@font-face{
    font-family: Open Sans;
    src: url(/assets/Fonts/OpenSans-VariableFont_wdth\,wght.ttf);
}